<template>
<div>
    <div class="top">
        <h1>用户总数：{{sum}}</h1>
        <h1>在线用户：{{this.online}}</h1>
        <el-button size="max" @click="handleEdit(scope.$index, scope.row)">清空
        </el-button>
    </div>
    <el-table ref="multipleTable" :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" tooltip-effect="dark" style="width: 100%">

        <el-table-column prop="id" label="序号" width="80" sortable>
        </el-table-column>

        <el-table-column prop="name" label="用户名" width="100" sortable>
        </el-table-column>

        <el-table-column prop="pass" label="密码" width="120" sortable>
        </el-table-column>

        <el-table-column prop="type" label="权限" width="100" sortable
        :filters="[{ text: '管理员', value: '0' }, { text: '用户', value: '1' },{ text: '其他', value: '2' }]"
        filter-placement="bottom-end" :filter-multiple="false" 
        :filter-method="filterHandler"
        :formatter="formatPower">
        
        </el-table-column>

        <el-table-column prop="status" label="状态" width="120" 
         column-key="status"
        :filters="[{ text: '在线', value: '1' }, { text: '离线', value: '0' },]"
        filter-placement="bottom-end" :filter-multiple="false" 
        :filter-method="filterHandler"
        :formatter="formatStatus">
        </el-table-column>

        <el-table-column prop="time_in" label="登录时间" width="120"
         :formatter="formatTime"
         sortable>
        </el-table-column>


        <el-table-column prop="time_out" label="退出时间" width="120"
         :formatter="formatTime"
         sortable>
        </el-table-column>

        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改
                </el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
                <el-button size="mini" type="danger" @click=" handleOut(scope.$index, scope.row)">离线
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <div style="text-align: center;margin-top: 20px;">
        <el-pagination background layout="prev, pager, next" :total="sum" @current-change="current_change">
        </el-pagination>
    </div>
    <div class="m">
        <!-- Form -->
        <el-dialog style="width:70%;margin:0 auto;" title="用户信息" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="用户名" :label-width="formLabelWidth">
                            <el-input v-model="form.name" value="" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="密码" :label-width="formLabelWidth">
                            <el-input v-model="form.pass" value="" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                     <el-col :span="12">
                        <el-form-item label="类别" :label-width="formLabelWidth">
                            <el-select v-model="form.type">
                                <el-option v-for="item in powers" :key="item.id" :label="item.label" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="Dopost">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
</template>

<style scoped>
.m {
    width: 300px;
}

.el-select .el-input__inner {
    width: 100px;
}

.el-input {
    width: 150px;
}

.top {
    height: 40px;
    background-color: aqua;
    line-height: 40px;
    text-align: center;
    padding: 20px;
}

h1 {
    display: block;
    float: left;
    margin-left: 10%;
}

.el-select {
    display: block;
    float: left;
    line-height: 40px;
    width: 150px;
    height: 40px;
}

.el-pagination {
    display: block;

}

.el-table .warning-row {
    background: oldlace;
    text-align: center;
}

.el-table .success-row {
    background: #f0f9eb;
    text-align: center;
}

.el-row {
    margin-bottom: 20px;
}

.el-col {
    border-radius: 4px;
}
</style>

<script>
import Qs from 'qs'
export default {
    name: "dataList",
    data() {
        return {
            multipleSelection: [],
            pagesize: 7,
            currentPage: 1,
            powers: [{
                id: '0',
                label: '管理'
            }, {
                id: '1',
                label: '用户'
            }, {
                id: '2',
                label: '其他'
            }, ],
            state: {},
            value: '',
            form: '',
            out:0,
            warn:0,
            dialogTableVisible: false,
            dialogFormVisible: false,
            formLabelWidth: '80px'
        }
    },
    computed: {
        tableData: function () {
            return this.$store.state.Userinfo;
        },
        sum: function () {
            return this.$store.state.Userinfo.length
        },
        online(){
            var online=0;
            for(let i=0;i<this.$store.state.Userinfo.length;i++){
                if(this.$store.state.Userinfo[i].status==1){
                    online++;
                }
            }
            return online;
        }
    },
    watch: {
        from: function (newVal, oldVal) {
            return oldVal;
        },
        sum: function (newVal, oldVal) {
            return oldVal;
        }
    },
    filters: {

    },
    methods: {
        filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
      formatPower: function (row, column) { 
            return row.type == '0' ? '管理员' : row.type == '1'? '用户' : '';
        },
        formatStatus: function (row, column) { 
            if(row.time_in>row.time_out){
                row.status='1';
                return "在线";
            }else{
                row.status='0';
                return "离线"
            }
        },
        formatTime: function (row, column,cellValue) { 
            let y=cellValue.substring(0, 4);
            let m=cellValue.substring(4, 6);
            let d=cellValue.substring(6, 8);
            return y+"-"+m+"-"+d;
        },
        current_change: function (currentPage) {
            this.currentPage = currentPage;
        },
        getuser_info() {
            this.$store.dispatch('GET_USERINFO');
        },
        //修改信息
        handleEdit(index, row) {
            this.dialogFormVisible = true;
            this.$store.state.row.index = index;
            this.form = JSON.parse(JSON.stringify(this.$store.state.Userinfo[this.$store.state.row.index]));
            console.log("修改的ID序号为"+this.form.id)
        },
        //获取排序的方式
        selectGet(vId) {
            let obj = {};
            obj = this.options.find((item) => { //这里的selectList就是上面遍历的数据源
                return item.id === vId; //筛选出匹配数据
            });
            console.log(obj.id); //我这边的name就是对应label的
            console.log(obj.label);
        },

        //将用户离线
        handleOut(index, row) {
             let Form=this.$store.state.Userinfo[index]
            Object.assign(Form, {
                "oper": "1",
            })
            console.log(Form)
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                transformRequest: [function (data) {
                    // 对 data 进行任意转换处理        
                    return Qs.stringify(data)
                }],
                url: "./action/user_man",
                data: Form
            }).then((res) => {
                if (res.data) {
                    alert("该用戶已离线！");
                }
            });
        },
        //删除用户信息
        handleDelete(index, row) {
            let Form=this.$store.state.Userinfo[index]
            Object.assign(Form, {
                "oper": "0",
            })
            console.log(Form)
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                transformRequest: [function (data) {
                    // 对 data 进行任意转换处理        
                    return Qs.stringify(data)
                }],
                url: "./action/user_man",
                data: Form
            }).then((res) => {
                if (res.data) {
                    alert("成功删除该用戶！");
                }
            });
        },
        
        //确定修改后，向后台发起请求
        Dopost() {
            console.log(this.form)
            Object.assign(this.form, {
                "oper": "2",
                "id": this.form.id
            })
            console.log(this.form)
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                transformRequest: [function (data) {
                    // 对 data 进行任意转换处理        
                    return Qs.stringify(data)
                }],
                url: "./action/user_man",
                data: this.form
            }).then((res) => {
                if (res.data) {
                    this.$store.dispatch('GET_USERINFO');
                    alert("修改成功");
                }
            });
        }
    },
    mounted: function () {
        this.getuser_info();
    },
}
</script>
